<!DOCTYPE html>
<html>

<head>
    <title>vue3reactive测试</title>
</head>

<body>
    <script src="./handlers.js"></script>
    <script src="./reactive.js"></script>
    <script src="./render.js"></script>
    <script>

        let needTrack = false
        let appData = reactive({
            message: "hello world",
            prop: "appData prop"
        })
        const virtualDom = {
            target: appData,
            type: "div",
            children: [
                {
                    type: "div",
                    children: {
                        target: appData,
                        key: "message",
                        isReactive: true
                    },
                }, {
                    type: "div",
                    children: {
                        target: appData,
                        key: "prop",
                        isReactive: true
                    },
                }, {
                    type: "input",
                    children: {

                    },
                    props: {
                        type: "text",
                        placeholder: {
                            target: appData,
                            key: "prop",
                            isReactive: true
                        },

                    },
                    events: {
                        oninput: (e) => {
                            appData.prop = e.target.value
                        }
                    }
                }
            ],
        }
       
        //创建app根元素
        let appdom = document.createElement("div")
        appdom.setAttribute("id", "app")
        document.body.appendChild(appdom)
        render(virtualDom, appdom)
    </script>
</body>

</html>